<template>
    <div>
        <el-form :model="manager" :rules="rules" ref="manager" label-width="100px" class="demo-ruleForm">
            <el-form-item label="管理员名称" prop="name">
                <el-input v-model="manager.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="manager.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm" :disabled="canLogin">登录</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'managerLogin',
    components: {},
    data() {
        const checkOutDate=(rule,value,callback)=>{
            if(value===''){
                this.canLogin=true;
                callback(new Error('用户名或密码均不可为空'));
            }else if(this.manager.name!==''&&this.manager.password!==''){
                this.canLogin=false;
                callback();
            }
        };
        return {
            canLogin:true,
            manager:{
                name:'',
                password:'',
            },
            rules:{
                name:[
                    { required: true, validator:checkOutDate, trigger: 'blur'}
                ],
                password:[
                    { required: true, validator:checkOutDate, trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        resetForm(){
            this.manager={
                name:'',
                password:'',
            }
        },
        submitForm(){
            axios(
                {
                    method:'post',
                    url:'/manager/login',
                    data:this.manager,
                }
            ).then(
                response=>{
                    if(response.data.data!==null){
                        if(response.data.data.canUse===false){
                            alert('此账号已被禁用，请更换账号登录');
                            this.resetForm();
                        }else{
                            localStorage.setItem('managerData',JSON.stringify(response.data.data));
                            this.$bus.$emit('manager',JSON.parse(localStorage.getItem('managerData')));
                            alert('登录成功');
                            this.$router.replace({
                                name:'getClientele',
                                params:{
                                    page:1,
                                    pageSize:12,
                                }
                            });
                        }
                    }else{
                        alert('登录失败，请检查您的管理员名称或密码是否出错');
                        this.resetForm();
                    }
                }
            )
        }
    },
}
</script>
<style scoped>


</style>